<template>
  <div
    class="chat-item p-12 w_full flex commhover flexcenter"
    :class="{ active: active }"
    @click="handleChateItem(item)"
  >
    <i class="el-icon-close f-14 c_888999 mr-8"></i>
    <el-badge :value="12">
      <img :src="item.avatar" alt="" class="avatarbox" />
    </el-badge>
    <div class="chatinfo">
      <div v-if="item.corp_name" class="textover f-14 c_000">
        <span class="elipisis textover">{{ item.nickname }}</span>
        <span class="elipisis textover pl-5 c_f90">@{{ item.corp_name }}</span>
      </div>
      <div v-else class="textover f-14 c_000">{{ item.nickname }}</div>
      <div class="textover f-12 mt-2 c_888999">你：冲冲冲</div>
    </div>
    <div class="chatdate h_full">
      <div class="f-12 c_text3 mb-3">11:35</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    item: {
      type: Object,
      default: {},
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleChateItem(item) {
      this.$emit("handleItem", item);
    },
  },
};
</script>


<style lang="scss" scoped>
.chat-item {
  // border-radius: 4px;
  height: 64px;

  .imore {
    display: none;
  }

  &:hover {
    background-color: #f0f0f0;
    .imore {
      display: inline-block;
    }
  }
  &.active {
    background-color: #e9e9e9;
  }

  .avatarbox {
    width: 40px;
    height: 40px;
  }
  .chatinfo {
    flex: 1;
    padding: 0 12px;
  }
  .elipisis {
    display: inline-block;
    max-width: 50%;
  }
  .chatdate {
    text-align: right;
  }
}
</style>